<template>
	<view class="a-search">
		<text class="iconfont icon-sousuo"></text>
		<input class="input" :placeholder="placeholder" type="text" :value="value" @input="change" />
		<text class="ok" v-if="isOk" @click="ok">确定</text>
	</view>
</template>

<script>
	export default {
		props: {
			placeholder: {
				type: String,
				default: "搜索"
			},
			value: {
				type: String,
				default: ''
			},
			isOk:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return {
				text:""
			}
		},
		methods: {
			change({detail:{value}}) {
				this.text = value;
				this.isOk || this.$emit("input",value);
				this.isOk || this.$emit('change',value);
			},
			ok(){
				this.$emit('change',this.text);
			}
		}
	}
</script>

<style lang="scss">
	.a-search {
		background-color: #fff;
		border-radius: 999px;
		height: 30px;
		overflow: hidden;
		display: flex;
		align-items: center;
		color: #000000;

		.icon-sousuo {
			font-size: 18px;
			color: inherit;
			margin-left: .4em;
			margin-top: .1em;
		}

		.input {
			flex: 1;
			border-radius: 999px;
			font-size: 14px;
			height: 100%;
			color: inherit;
			text-align: left;
			padding: 0 1em 0 .5em;
		}

		.ok {
			cursor: pointer;
			color: inherit;
			font-size: 16px;
			padding: 0 1em 0 .7em;
			border-left: 1px solid rgba(0, 0, 0, .2);
			height: 100%;
			display: flex;
			align-items: center;
		}
	}
</style>
